import React, { Component } from 'react';
import indexCss from "./index.module.scss";

// 1 withRouter 函数 用来给小组件 传递 路由信息对象 
import { withRouter } from "react-router-dom";
 
// // react 中 如果想要使用 根路径 对文件做一些简单的配置 保留
// import { initCityAsync  } from "store/actionCreator";

import { connect } from "react-redux";

class Index extends Component {

  // 定义属性的默认值   讲解 props 基础的讲解过  props 类型校验 !!
  static defaultProps={
    iconcolor:"#fff"
  }
  render() {
    const { history } = this.props;
    return (
      <div className={indexCss.city_select} >
        <div className={indexCss.city_select_search}>
          <div className={indexCss.city} onClick={() => { history.push("/citylist") }} >{this.props.cityName}</div>
          <div className={indexCss.city_input}>
            {/* <i className={'iconfont icon-seach '+ indexCss.city_input_icon }></i> */}
            <i className={['iconfont icon-seach ', indexCss.city_input_icon].join(' ')}></i>
            <input
              placeholder="请输入小区或地址"
              type="text" />
          </div>
        </div>
        <div className={indexCss.city_select_icon}>
          <i 
          style={{color:this.props.iconcolor}}
          onClick={()=>this.props.history.push("/mapfound")}
          className={['iconfont icon-map', indexCss.city_select_icon_inner].join(' ')}></i>
        </div>
      </div>
    );
  }
}


const mapStateToProps = (state) => {
  return {
    cityName: state.cityReducer.cityName
  }
}


// 2 将组件 使用  withRouter 包起来即可 
export default connect(mapStateToProps, null)(withRouter(Index));
